<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<form:form commandName="databean" cssClass="form-horizontal" role="form">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">密码修改</h3>
		</div>
		<div class="panel-body">
			<div class="col-sm-9">
				<div class="form-group">
					<label class="col-sm-4 control-label no-padding-right" for="oldPassword">输入旧密码</label>
					<div class="col-sm-8">
						<input type="password" name="oldPassword" id="oldPassword" placeholder="请输入旧密码" class="form-control required">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label no-padding-right" for="password">输入新密码</label>
					<div class="col-sm-8">
						<input type="password" id="pwd1" placeholder="请输入新密码" onkeyup="validate1()" class="form-control required">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label no-padding-right" for="password">再次输入新密码</label>
					<div class="col-sm-8">
						<input type="password" name="password" id="pwd2" onkeyup="validate()" placeholder="请再次输入新密码" class="form-control required">
					</div>
				</div>
				<div id="tishi1" class="col-sm-offset-4 col-sm-8"></div>
				<div id="tishi" class="col-sm-offset-4 col-sm-8"></div>
			</div>
		</div>
	</div>
</form:form>
<script>
    // 密码正则
    $(function () {
        document.getElementById("pwd2").disabled = true;
    });

    function isPassword(str) {
        var oldPassword = document.getElementById("oldPassword").value;
        var reg = /^[a-zA-Z]\w{5,17}$/;
        // 以字母开头，长度在6~18之间，只能包含字母、数字和下划线
        if ( oldPassword == str ||!reg.test(str) ) {
            document.getElementById("tishi1").innerHTML = "<span font class='text-danger'>旧密码和新密码不能一样</span>";
            document.getElementById("tishi").innerHTML="<span font class='text-danger'>以字母开头，长度在6~18之间，只能包含字母、数字和下划线</span>";
            document.getElementById("pwd2").disabled = true;
        }else {
            document.getElementById("pwd2").disabled = false;
            document.getElementById("tishi1").innerHTML = " ";
        };
    };


    function validate1() {
        var pwd1 = document.getElementById("pwd1").value;
        isPassword(pwd1);
        if(!$("#pwd2").prop("disabled")){
            validate();
        }
    }
    function validate() {
        var pwd1 = document.getElementById("pwd1").value;
        var pwd2 = document.getElementById("pwd2").value;
        isPassword();
        <!-- 对比两次输入的密码 -->
        if(pwd1 == pwd2) {
            document.getElementById("tishi").innerHTML="<span font class='text-success'>两次密码相同</span>";
        }
        else {
            $("#tishi").html("<span font class='text-danger'>两次密码不相同</span>");
        }
    }
</script>